/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, BlobInputList, TableHead,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet, } from "../../../common/tool";
import {useOmnipotentPrefItspe, useOmnipotentPrefTitle,} from "../../hook/useOmnipotentPref";

export const setConfig水质 =(orc:any)=> [
  ['式运动黏', [], '运动黏度(40℃)/(mm²/s)', '型式试验数值×（1±10%）', []],
  ['式酸值', [], '酸值 [mg/g(以KOH计)]', '≤0.05', ],
  ['式残炭', [], '残 炭（%）', '≤0.05', ],
  ['式酸碱', [], '水溶性酸碱', '无', ],
  ['式密度', [], '密度（kg/m³）', '型式试验数值±10', ],
];

export const items水质检 =setConfig水质(undefined);
export const itemA水质检: string[] = [ ];
items水质检.forEach(([name, title, initIsp], i: number) => {
  itemA水质检.push(name as string);
});

const 检测结果选=['未检出','无','小于0.01','≤0.0'];
export const WaterQuality =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA水质检, );
      const titNode=useOmnipotentPrefTitle({config:items水质检});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>

            {items水质检.map(([name, cfgs, item, unit,]: any, i: number) => {
              const {t:group}=cfgs?.[0] || {t:undefined};
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}&nbsp;判断标准：{unit} ;
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;型式试验数值
                    <BlobInputList value={inp?.[name]?.s ?? ''} datalist={检测结果选}
                                   style={{display: 'inline-flex', width: inp?.[name]?.s?.length>8? '17rem':'7rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 's', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;验证性检验值
                    <BlobInputList value={inp?.[name]?.r ?? ''} datalist={检测结果选}
                                   style={{display: 'inline-flex', width: '7rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            {children}
          </InspectRecordLayout>
      );
});

//需要特殊处理 span合并项目：
const itemRender=(orc: any, name:string,i:number,item:any,xmcspan:number,unit:any)=><>
  <CCell colSpan={xmcspan}>{item}</CCell>
  <CCell>{unit??'／'}</CCell>
  <CCell>{orc?.[name]?.s??'／'}</CCell>
  <CCell>{orc?.[name]?.r??'／'}</CCell>
</>;

export const WaterQualityVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const configNew =React.useMemo(()=>setConfig水质(orc),[orc]);
  const [render]=useOmnipotentPrefItspe({orc, config:configNew,
                        itemRender, pcols:0, noNo:true, unitCel:true});
  return <>
    <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}} }>
    </div>
    <Table id={'WaterQuality'} fixed={ ["22%","34%","20%","%"]  }
             css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight  miniw={800}>
      <TableHead>
        <TableRow>
          <CCell>检验项目</CCell><CCell>判断标准</CCell><CCell>型式试验数值</CCell><CCell>验证性检验值</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={"WaterQuality"}>
          {render}
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
